<template>
  <div>
    <el-container style="height: 100vh; overflow: hidden;">
      <!-- 侧边栏导航 -->
      <el-aside width="220px" style="background-color: #f5f7fa; border-right: 1px solid #e4e7ed;">
        <el-menu
            mode="vertical"
            :default-active="activePath"
            background-color="#f5f7fa"
            text-color="#333"
            active-text-color="#1890ff"
            @select="handleSelect"
            ref="menu"
        >
          <el-menu-item index="/home/system/usermanage">
            <i class="el-icon-user"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <el-menu-item index="/home/system/authority">
            <i class="el-icon-s-custom"></i>
            <span slot="title">角色管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
/* 选中样式强化 */
/deep/ .el-menu-item.is-active {
  background-color: #e6f7ff !important; /* 浅蓝色背景 */
  color: #1890ff !important; /* 选中文字颜色 */
  font-weight: 500; /* 文字加粗 */
}

/* 优化悬停效果 */
/deep/ .el-menu-item:not(.is-active):hover {
  background-color: #f0f2f5; /* 浅灰背景 */
}

/* 增加菜单项间距和图标对齐 */
/deep/ .el-menu-item {
  padding-left: 30px !important; /* 图标与文字整体右移 */
  height: 50px; /* 增加菜单项高度 */
  line-height: 50px;
}

/* 侧边栏最小高度 */
/deep/ .el-aside {
  min-height: 100vh;
}
</style>

<script>
export default {
  data() {
    return {
      activePath: ''
    };
  },
  mounted() {
    // 初始化选中项
    this.setDefaultActive();
  },
  methods: {
    handleSelect(key) {
      // 点击导航项时，先更新选中状态，再跳转路由
      this.activePath = key;
      this.$router.push(key);
    },
    setDefaultActive() {
      const currentPath = this.$route.path;
      const validPaths = [
        '/home/system/usermanage',
        '/home/system/authority'
      ];

      // 如果当前路由是有效导航项，则选中对应项；否则默认选中"用户管理"
      this.activePath = validPaths.includes(currentPath) ? currentPath : '/home/system/usermanage';

      // 手动更新菜单选中状态，确保生效
      this.$nextTick(() => {
        if (this.$refs.menu) {
          this.$refs.menu.activeIndex = this.activePath;
        }
      });
    }
  },
  watch: {
    // 监听路由变化，更新导航选中状态
    '$route'() {
      this.setDefaultActive();
    }
  }
}
</script>